﻿
@{
    ViewBag.Title = "注册";
    Layout = "~/Views/Shared/_LayoutPage.cshtml";
}


<div class="main layui-clear">
    <h2 class="page-title">注册</h2>
    <div class="layui-form layui-form-pane">
        <form method="post">
            @Html.AntiForgeryToken()
            <div class="layui-form-item">
                <label for="L_email" class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                    <input type="email" id="L_email" name="email" required lay-verify="email" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">将会成为您唯一的登入名</div>
            </div>
            <div class="layui-form-item">
                <label for="L_nickname" class="layui-form-label">昵称</label>
                <div class="layui-input-inline">
                    <input type="text" id="L_nickname" name="nickname" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_pass" class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" id="L_pass" name="pass" required lay-verify="pass" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">6到16个字符</div>
            </div>
            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label">确认密码</label>
                <div class="layui-input-inline">
                    <input type="password" id="L_repass" name="repass" required lay-verify="repass" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_vercode" class="layui-form-label">人类验证</label>
                <div class="layui-input-inline">
                    <input type="text" id="L_vercode" name="vercode" required lay-verify="required" placeholder="请输入后面的验证码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid">
                    <img id="valiCode" src="@Url.Action("GetValidateCode", "ValidateCode", new { v = DateTime.Now.Ticks })" style="cursor:pointer;" alt="验证码" />
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn" lay-filter="reg" lay-submit>立即注册</button>
            </div>
            @*<div class="layui-form-item fly-form-app">
                <span>或者直接使用社交账号快捷注册</span>
                <a href="" onclick="layer.msg('正在通过QQ登入', {icon:16, shade: 0.1, time:0})" class="iconfont icon-qq" title="QQ登入"></a>
                <a href="" onclick="layer.msg('正在通过微博登入', {icon:16, shade: 0.1, time:0})" class="iconfont icon-weibo" title="微博登入"></a>
            </div>*@
        </form>
    </div>
</div>
@section scripts{
    <script>
        layui.config({
            base:'../Content/res/mods/'
        }).use(['layer', 'form','validator'], function () {
            var layer = layui.layer
                , $ = layui.jquery
                , form = layui.form()
                , validator = layui.validator;
            

            form.verify({
                pass: function (value) {
                    if (value.length == 0) {
                        return '密码不能为空！';
                    }
                    if (!validator.IsStringLength(value, 6, 16)) {
                        return '密码在6到16个字符之间';
                    }
                },
                repass: function (value) {
                    var pass = $('form').find('input[name=pass]').val();
                    if (pass !== value) {
                        return '两次密码输入不一致';
                    }
                }

            });

            form.on('submit(reg)', function (data) {

                $.post('@Url.Action("Register", "Account")', data.field, function (res) {
                    if (!res.success) {
                        layer.msg(res.message, { icon: 2 });
                        $('#valiCode').click();
                    } else {
                        layer.msg(res.message, { icon: 1, time: 1000  }, function (index) {
                            layer.close(index);
                            location.href = '@Url.Action("Login", "Account")';//跳转至登录页
                        });
                    }

                }, 'json');

                return false;
            });

            $('#valiCode').off('click').on('click', function () {
                this.src = '@Url.Action("GetValidateCode", "ValidateCode")?v=' + new Date().getTime();
            });
        })
    </script>
}

